import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import style from './style.module.scss';

const Slider = props => {
    const { id, img} = props;
    return(
        <li className={style.slider}>
            <Link to={`play/${id}`}>
                <img src={img} alt="pic"/>
            </Link>
        </li>
    )
}

class Banner extends Component {
    constructor(props) {
        super(props);
        this.speed = this.props.speed || 2000;
        this.data = this.props.data || [];
        this.count = this.data.length + 1;
        this.ele = null;
        this.width = 0;
        this.index = 0;
        this.timer = 0;
        this.isRun = false;
    }

    runPlay = (dir) => {
        if(this.count <= 1) return;
        if(dir === 'Left') {
            if(this.index === this.count - 1) {
                this.index = 0;
            }
            this.index += 1;
        }
        if(dir === 'Right') {
            if(this.index === 0) {
                this.index = this.count - 1;
            }
            this.index -= 1;
        }
        this.ele.style.transform = `translateX(-${this.index * this.width}px)`;
        if(!this.isRun) {
            clearInterval(this.timer);
            this.isRun = true;
            this.timer = setInterval(() => {
                this.runPlay(dir);
            }, this.speed);
        }
    }

    handlerNext = () => {
        this.runPlay('Left');
    }

    handlerPrev = () => {
        this.runPlay('Right');
    }

    autoPlay = () => {
        this.isRun = false;
        this.runPlay('Left');
    }

    handelPause = () => {
        this.isRun = true;
        clearInterval(this.timer);
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.data !== this.props.data) {
            this.data = nextProps.data || [];
            this.count = this.data.length + 1;
            if(this.data.length > 0) {
                this.ele = this.refs.container;
                this.width = this.ele.offsetWidth;
                this.data = [...this.data, this.data[0]];
                this.autoPlay();
            }
        }
    }

    componentDidMount() {
        if(this.data.length > 1) {
            this.ele = this.refs.container;
            this.width = this.ele.offsetWidth;
            this.data = [...this.data, this.data[0]];
            this.autoPlay();
        }
    }

    componentWillUnmount() {
        this.isRun = true;
        clearInterval(this.timer);
    }

    render() {
        return(
            <div className={style.banner}>
                <div className={style.warp}
                    onMouseEnter={() => this.handelPause()}
                    onMouseLeave={() => this.autoPlay()}
                >
                    <ul ref="container" className={style.container} style={{width: `${this.count * 100}%`}}>
                        {
                            this.data.map((el, index) => (
                                <Slider key={el.id+index} {...el}></Slider>
                            ))
                        }
                    </ul>
                    <button className={style.prev} onClick={() => this.handlerPrev()}>&lt;</button>
                    <button className={style.next} onClick={() => this.handlerNext()}>&gt;</button>
                </div>
            </div>
        )
    }
}

export default Banner;